<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        background: white;
        font-family: 'Noto Sans SC', sans-serif;
        }
      h1 { color: white;}
      .arrowheadPath {fill: red;}

      .edgePath .path {stroke: red;}
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <div style="display: flex;width: 100%; height: 100%">
      <div class="mermaid" style="width: 100%; height: 100%">
        sequenceDiagram
        Alice->>John: Hello John, how are you?
        loop Healthcheck
            John->>John: Fight against hypochondria
        end
        Note right of John: Rational thoughts!
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!

      </div>
</div>
  <script src="./mermaid.js"></script>
    <script>
      mermaid.initialize({
        // theme: 'dark',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'linear', "htmlLabels": false },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        fontFamily: '"Noto Sans SC", sans-serif'
      });
    </script>
    </script>
  </body>
</html>
